console.log('my tag clound starts');

var tagData = [{ tag: '资源', size: 20 },{ tag: '作 死', size: 40 },{ tag: 'node', size: 20 },{ tag: 'javascript', size: 40 },{ tag: 'css', size: 20 }];
// ?
var fill = d3.scale.category20();
var currentRect = document.body.getBoundingClientRect();
var svgWidth = currentRect.width * 0.8,
    svgHeight = window.screen.availHeight * 0.8;
var boundTagData = [];
var RANDOM_MODE = true;

d3.selectAll('.hide').style('display', 'none');
var maxSize = 0 ;
var zoom = 2;
var fontSizeRange = [16, 60];
var scaleSizeFn = function(){};

var theSvg = d3.select('.tag-clound-container')
  .append('svg')
    .attr('id', 'tag-svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight)
  .append('g')
  .selectAll('text')
    //.data(tagData)
    .data(function(){
      boundTagData = [];
      d3.selectAll('.tag-clound-list > li').each(function(){
        // todo 不用jQuery也可以吧？
        var size = this.dataset.tagSize,
          name = this.dataset.tagName,
          href = this.querySelector('a').attributes.href.nodeValue;
        boundTagData.push({tag: name, size: size, href: href});
        if(size > maxSize){maxSize = size;}
      })
      scaleSizeFn = d3.scale.linear()
      .domain([1, maxSize])
      .range(fontSizeRange);
      return boundTagData;
    })
  .enter().append('text')
    .attr('class', 'word-tag')
    .text(function(d){
      return '' + d.tag;
    })
    .attr("transform", function(d) {
      //return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      return 'translate(' + (Math.random(1) * svgWidth) +','+ (Math.random() * svgHeight) +')';
    })
    .attr("text-anchor", "middle")
    .style("font-family", "Helvetica Neue, Microsoft Yahei")
    .style('font-size', function(d){
      if( RANDOM_MODE ) {
        return (Math.random() * 3 + 1) * scaleSizeFn.call(this, d.size) + 'px';
      }else {
        return scaleSizeFn.call(this, d.size) + 'px';
      }
    })
    // todo 怎样在g里面添加href 或者还是绑定在click事件上？
    // todo 怎样防止字的重叠？
    .attr("href", function(d) { return d.href; })
    .transition()

